<script setup lang="ts">
import { StkTableColumn } from '@/StkTable/index';
import mockjs from 'mockjs';
import { getIsZH } from '../../hooks/getIsZH';
import StkTable from '../../StkTable.vue';
import Panel from './Panel.vue';
import type { DataType } from './types';

const columns: StkTableColumn<DataType>[] = [{ dataIndex: 'title', title: '', customCell: Panel }];

    const isZH = getIsZH();


const data = new Array(20).fill(0).map((_, i) => ({
        id: i,
        title:isZH ? mockjs.Random.ctitle(5, 15) : mockjs.Random.sentence(1, 5),
        content: isZH ? mockjs.Random.cparagraph(1, 10) : mockjs.Random.paragraph(1, 5),
        date: isZH ? mockjs.Random.datetime('yyyy-MM-dd HH:mm') : mockjs.Random.datetime('MM/dd/yyyy HH:mm'),

    }))
</script>

<template>
    <StkTable
        row-key="id"
        style="height: 400px"
        virtual
        headless
        :row-height="200"
        :row-active="false"
        :bordered="false"
        :row-hover="false"
        :columns="columns"
        :data-source="data"
    ></StkTable>
</template>
<style scoped>
:deep(.v-head) {
    background-color: #333;
    font-weight: bold;
}
</style>
